<template>
  <view class="banner-wrap">
    <view class="icon-wrap">
      <u--image
        class="icon1"
        width="198rpx"
        height="34rpx"
        src="/static/logo-icon.png"
      ></u--image>
    </view>
    <view class="bannerContent">
      <u-swiper
        :list="banners"
        height="896rpx"
        keyName="Image"
        indicator
        indicatorMode="dot"
        indicatorActiveColor="#FE5B68"
        indicatorInactiveColor="#ffffff"
        bgColor="#000000"
        @tap="goPage"
        circular
      ></u-swiper>
      <view class="bg-wrap"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["banners"],
  data() {
    return {};
  },
  methods: {
    goPage(index) {
      //找出当前点击的banner
      let item = this.banners[index];
      uni.navigateTo({
        url: `/pages/videoList/videoList?id=${item.VideoId}&title=${item.Title}`,
      });
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.banner-wrap {
  position: relative;
  height: 896rpx;
  width: 100%;

  .icon-wrap {
    top: 60rpx;
    left: 0;
    position: absolute;
    z-index: 1;
    padding: 0 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  ::v-deep .u-swiper__indicator {
    z-index: 99 !important;
  }

  .bg-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60rpx;
    //黑色渐变
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000000);
    z-index: 9;
  }
}
</style>
